<template>
    <div class="audio">
        <div class="mark" :style="{ backgroundImage: 'url(' + curFM.img + ')' }"></div>
        <van-icon name="arrow-down" color="#fff" size="30" style="margin: 20px;" @click="closePop" />
        <van-swipe class="my-swipe" :autoplay="0" :show-indicators="false" height="300">
            <van-swipe-item>
                <img :src="curFM.img" alt="">
                <div class="des">
                    <span class="tit">{{ curFM.title }}</span>
                    <span class="man">{{ curFM.anchors }}</span>
                </div>
            </van-swipe-item>
        </van-swipe>

        <nut-audio
            :url="url"
            :muted="muted"
            :autoplay="autoplay"
            :loop="false"
            type="progress"
            @forward="forward"
            @fastBack="fastBack"
            @play="changeStatus"
            @ended="ended"
            @changeProgress="changeProgress"
        >

        <van-grid :border="false">
            <van-grid-item icon="like-o"  />
            <van-grid-item icon="share-o" @click="share" />
            <van-grid-item icon="comment-o"  />
            <van-grid-item icon="clock-o"  />
        </van-grid>

        <div class="nut-audio-operate-group">
            <nut-audio-operate type="back">
            <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
            </nut-audio-operate>
            <nut-audio-operate type="play">
            <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
            <PlayStop v-else width="35px" height="35px"></PlayStop>
            </nut-audio-operate>
            <nut-audio-operate type="forward">
            <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
            </nut-audio-operate>
        </div>
        </nut-audio>

        <van-share-sheet
          v-model:show="showShare"
          :options="options"
          @select="onSelect"
        />
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref,computed ,watch} from 'vue';
import { showToast } from 'vant';
import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue'
import ajax from '../../apis/Ajax';
import useCommonStore from '../../store/common'

const store = useCommonStore()


export default {
  components: {
    PlayDoubleBack,
    PlayDoubleForward,
    PlayStart, 
    PlayStop
  },
  methods: {
    closePop() {
      this.$emit('closeEvt',false)
    }
  },

  setup() {    
    
    let curFM:any = ref([])

    let url:any = ref('')

    let id = computed(()=>{
      return store.rid
    })

    // console.log(store.rid,id.value);

    let showShare:any = ref(false);
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];

    const onSelect = (option:any) => {
      showToast(option.name);
      showShare.value = false;
    };

    const share = ()=>{
      console.log(111)
      showShare.value = true
      
    }


    const data = reactive({
      muted: false,
      autoplay: true
    });

    const playing = ref(true);

    watch(
      id,
    function(val:any){
      curFM.value = []
        // console.log(val)
        ajax({
        url:'/recDetail',
        params:{
          id:val
        }
      }).then(({data})=>{
        // console.log(data.rows)
        curFM.value = data.rows
        url.value = data.rows.url
      })
    },
    { immediate: true }
)


    const fastBack = () => {
      console.log('←')
      if (id.value == 0) {
        store.rid == 0
      }else{
        store.rid--
      }
      // getDetail()
      // console.log(id)
    };

    const forward = () => {
    console.log(store.rid)
      if (id.value == 5) {
        store.rid == 5
      }else{
        store.rid++
      }
      // getDetail()
      // console.log(store.rid)
      
    };

    const changeStatus = (status: boolean) => {
      console.log('当前播放状态', status);
      playing.value = status;
    };

    const ended = () => {
      console.log('播放结束');
    };

    const changeProgress = (val: number) => {
      console.log('改变进度条', val);
    };

    // getDetail()

    return {
      ...toRefs(data),
      url,
      showShare,
      id,
      curFM,
      playing, 
      fastBack, 
      forward, 
      options,
      share,
      onSelect,
      // closePop,
      changeStatus, 
    //   audioDemo, 
      ended, 
    //   duration, 
      changeProgress
    };
  }
};
</script>


<style lang="less">
.audio {
    height: 100vh;
    .mark{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-size: cover;
        filter:blur(10px);
        opacity: 0.8;
        background-color: rgba(0, 0, 0, .3);
        background-position: center center;
        // background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F21%2F20200721225542_2R83m.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687495636&t=dcb81096dbd49c66e576ab1664c48dfe);
    }
    .bg {
        backdrop-filter: blur(100px);
        height: 100vh;
    }
    .my-swipe .van-swipe-item {
        height: 100vh;
        color: black;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        // background-color: pink;
        position: relative;
        padding: 15px;
        img{
            width: 220px;
        }
    }
    .des {
        position: absolute;
        width: 100%;
        top: 240px;
        line-height: 30px;
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
        color: #fff;
        .tit {
            font-size: 1.7rem;
        }
        .man {
            font-size: 1.5rem;
        }
    }
    .nut-audio__progress {
        width: 90vw;
    }
    .nut-audio-operate-group .nut-audio-operate .nut-audio-operate-item {
        margin: 0 30px;
    }
    .van-grid {
        margin: 1.5rem 0;
        .van-grid-item__content{
            background-color: transparent;
            color: #fff;
        }
    }
    .nut-icon {
        color: #fff;
    
    }
}
</style>